<template>
    <div class="app-container">
        <!-- 文章标题 -->
        <div class="item block star">文章标题</div>
        <div class="item">
            <el-input v-model="form.title" placeholder="请输入文字标题"></el-input>
        </div>
        <div class="item block star">文章编辑</div>
        <div class="item">
            <editor ref="toastuiEditor" :initial-value="form.editorText" height="600px" :options="editorOptions" />
        </div>
        <div class="item block star">文章描述</div>
        <div class="item">
            <el-input type="textarea" :rows="6" placeholder="请输入文字描述" v-model="form.description"> </el-input>
        </div>
        <div class="item block">文章头图</div>
        <div class="item">
            <Upload v-model="form.thumb" class="upload"></Upload>
        </div>
        <div class="item block star">选择分类</div>
        <div class="item">
            <el-select v-model="form.select" placeholder="请选择分类">
                <el-option v-for="item in blogType" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
        </div>
        <el-button
            type="primary"
            class="item"
            @click="handleAddOrEditBlogButton"
            :loading="isLoading"
            v-if="mode === 'add'"
        >
            发布文章
        </el-button>
        <el-button type="primary" class="item" @click="handleAddOrEditBlogButton" :loading="isLoading" v-else>
            确认修改
        </el-button>
        <el-button class="item" @click="handleCancelButton" :loading="isLoading"> 取消 </el-button>
    </div>
</template>

<script>
import "@toast-ui/editor/dist/toastui-editor.css"
import { Editor } from "@toast-ui/vue-editor"
import Upload from "@/components/Upload/index.vue"
// 获取分类
import { getBlogType, addBlog, editBlog, findOneBlog } from "@/api/blog"
export default {
    components: { Editor, Upload },
    props: {
        mode: {
            type: String,
            default: "add"
        }
    },
    data() {
        return {
            form: {
                title: "", // 对应title
                editorText: "", // 对应htmlContent
                description: "", // 对应description
                thumb: "", // 对应thumb
                select: "" // 对应categoryId
            },
            blogType: [],
            imgUrl: "", // 图片在服务器的地址
            isLoading: false,
            // editor的设置
            editorOptions: {
                language: "zh-CN"
            },
            // 编辑页面特有
            id: null
        }
    },
    created() {
        this.fetchData()
        if (this.mode === "edit") {
            // 进来的时候就需要根据传递的id
            const id = this.$route.params.id
            this.id = id
            // 回填
            this.fetchOneBlog()
        }
    },
    methods: {
        async fetchData() {
            const res = await getBlogType()
            this.blogType = res.data
        },
        // 添加文章的业务逻辑
        async handleAddOrEditBlogButton() {
            this.isLoading = true
            const html = this.$refs.toastuiEditor.invoke("getHTML")
            const markdown = this.$refs.toastuiEditor.invoke("getMarkdown")
            // 组装接口需要的对象
            const obj = {
                title: this.form.title,
                description: this.form.description,
                createDate: new Date().getTime(),
                htmlContent: html,
                thumb: this.form.thumb,
                categoryId: this.form.select,
                toc: [], // 已经改为服务器生成，所以传空数组
                markdownContent: markdown
            }
            // 简单的表单认证，图片可选其它必填
            if (obj.title && obj.description && obj.categoryId && obj.htmlContent) {
                let res = {}
                if (this.mode === "add") {
                    res = await addBlog(obj)
                } else {
                    res = await editBlog(obj, this.id)
                }
                if (typeof res === "string") {
                    this.$message.error(JSON.parse(res).msg)
                    this.isLoading = false
                    return
                }
                if (this.mode === "add") {
                    this.$message.success("添加文章成功")
                } else {
                    this.$message.success("修改文章成功")
                }
                this.$router.push({ name: "BlogList" })
                this.isLoading = false
                return
            }
            this.$message.error("注意填写好必填字段")
            this.isLoading = false
        },
        async fetchOneBlog() {
            const res = await findOneBlog(this.id)
            // 将内容回填到表单
            this.form.title = res.data.title
            this.$refs.toastuiEditor.invoke("setHTML", res.data.htmlContent)
            this.form.description = res.data.description
            this.form.thumb = res.data.thumb
            this.form.select = res.data.category === "" ? "" : res.data.category.id
        },
        handleCancelButton() {
            this.$router.replace({ name: "BlogList" })
        }
    }
}
</script>

<style scoped>
.item {
    margin-bottom: 15px;
}
.block {
    font-size: 1.5rem;
    font-weight: 100;
    position: relative;
}
.upload {
    width: 100px;
}
.star::after {
    display: block;
    content: "*";
    width: 5px;
    height: 5px;
    position: absolute;
    left: -10px;
    top: 0;
    color: red;
}
</style>
